<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(6, 1fr);
            grid-gap: 5px;
            width: 500px;
            height: 420px;
            background-color: bisque;
            padding: 5px;
        }

        input {
            grid-area: 1/1/2/6;
        }

        .box1 {
            background-color: antiquewhite;
            display: grid;
            justify-content: center;
            align-content: center;
        }
        .box2{
            grid-area: 2/1/3/3;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" name="" id="" value="">
        <div class="box1">round</div>
        <div class="box1">%</div>
        <div class="box1 box2">c</div>
        <div class="box1">²</div>
        <div class="box1">7</div>
        <div class="box1">8</div>
        <div class="box1">9</div>
        <div class="box1">/</div>
        <div class="box1">³</div>
        <div class="box1">4</div>
        <div class="box1">5</div>
        <div class="box1">6</div>
        <div class="box1">*</div>
        <div class="box1">√</div>
        <div class="box1">1</div>
        <div class="box1">2</div>
        <div class="box1">3</div>
        <div class="box1">-</div>
        <div class="box1">ceil</div>
        <div class="box1">0</div>
        <div class="box1">.</div>
        <div class="box1">=</div>
        <div class="box1">+</div>
        <div class="box1">floor</div>
    </div>
    <script>
        let ipt = document.querySelector('input')
        let div = document.querySelectorAll('.box1')
        let str = "round,%,c,²,7,8,9,/,³,4,5,6,*,√,1,2,3,-,ceil,0,.,=,+,floor"
        let arr = str.split(',')
        console.log(arr)
        div.forEach((item,index) => {
            item.onclick =  ()=> {
                if(index==21){
                    ipt.value=eval(ipt.value)
                    return
                }
                if(index==0){
                    ipt.value=Math.round(eval(ipt.value))
                    return
                }
                if(index==2){
                    ipt.value=''
                    return
                }
                if(index==3){
                    ipt.value=Math.pow(eval(ipt.value),2)
                    return
                }
                if(index==8){
                    ipt.value=Math.pow(eval(ipt.value),3)
                    return
                }
                if(index==13){
                    ipt.value=Math.sqrt(eval(ipt.value))
                    return
                }
                if(index==18){
                    ipt.value=Math.ceil(eval(ipt.value))
                    return
                }
                if(index==23){
                    ipt.value=Math.floor(eval(ipt.value))
                    return
                }
                item.style.backgroundColor = 'beige'
                ipt.value+=arr[index]
                setTimeout(() => {
                    item.style.backgroundColor = 'antiquewhite'
                },100)
            }
        });
    </script>
</body>

</html>